<template>
  <!--编辑页面-->
  <div class="editPublish-box">
    <div class="editPublish-nav">
      <div class="editPublish-nav-sub">
        <router-link target="_blank" to="/homePage">
          <div class="editPublish-nav-return" title="网站首页">
<!--            <i class="iconfont icon-return"></i>-->
<!--            BIDEA-->
            <img src="../../../assets/images/common/logo2.png" width="70px" style="margin-top: 5px">
          </div>
        </router-link>
      </div>
    </div>
    <div class="editPublish-article">
      <div class="editName">
        <router-link to="/publishPage/error" title="点击切换 Error">
          <div v-if="this.component == 'error'" class="error-question" style="background-color: #434040;">Error</div>
          <div v-else class="error-question">Error</div>
        </router-link>
        <router-link to="/publishPage/question" title="点击切换 Question">
          <div v-if="this.component == 'question'" class="error-question" style="background-color: #434040;">Question</div>
          <div v-else class="error-question">Question</div>
        </router-link>
        <router-link to="/publishPage/blink" title="点击切换 Blink">
          <div v-if="this.component == 'blink'" class="error-question" style="background-color: #434040;">Blink</div>
          <div v-else class="error-question">Blink</div>
        </router-link>
      </div>
      <router-view @component="routerView"></router-view>
    </div>
    <div class="publishPage">
      <a href="javascript:;"
         style="
         display: inline-block;
         color: #cacaca;
         width: 200px;
         height: 20px;
         margin: 0 auto;
         line-height: 20px;
         font-size: 12px;
         text-align: center;
         line-height: 20px;"
      >© 2022 StudiousTiger</a>
    </div>
    <ChangeLanguage />
    <BackUp />
  </div>

</template>

<script>
    import BackUp from '../../common/BackUp'
    import ChangeLanguage from '../../common/ChangeLanguage'

    export default {
        name: "PublishPage",
        components: {
            ChangeLanguage,
            BackUp,
        },
        data(){
            return{
                component:''
            }
        },
        // 已弃用
        // beforeCreate: function () {
        //     this.axios.post('http://localhost:8081/loginReg/weatherLogin').then(res=>{
        //         if (res.data == false) {
        //             this.$router.push('/loginRegistrationPage')
        //         }
        //     }).catch(
        //         exception=>{
        //             this.$router.push('/loginRegistrationPage')
        //         }
        //     )
        // },
        methods: {
            routerView(val){
                this.component = val
            }
        }

    }
</script>

<style scoped>
  .editPublish-box{
    letter-spacing: 1px;
  }
  .editPublish-nav{
    width: 100%;
    height: 50px;
    background-color: rgb(51, 51, 51);
    box-shadow: 0 0 10px #b2b2b2;
    position: sticky;
    top: 0;
    z-index: 99;
  }
  .editPublish-nav-sub{
    width: 1150px;
    height: 50px;
    margin: 0px auto;
    background-color: rgb(51, 51, 51);
    position: relative;
  }
  .editPublish-nav-return{
    width: 25px;
    height: 50px;
    line-height: 50px;
    color: #e6e6e6;
    font-size: 20px;
    font-weight: bolder;
  }
  .editPublish-article{
    width: 1150px;
    min-height: 500px;
    margin: 20px auto;
  }
  .editName{
    width: 99.3%;
    height: 50px;
    line-height: 50px;
    background-color: #686868;
    margin: 10px auto;
    padding-left: 10px;
    font-size: 18px;
    font-weight: bolder;
    color: #ebebeb;
    box-shadow: 0 0 10px #bfbfbf;
    border-radius: 2px;
  }
  .error-question{
    float: left;
    height: 35px;
    line-height: 35px;
    margin-top: 7px;
    margin-right: 20px;
    text-align: center;
    color: #ebebeb;
    border-radius: 20px;
    transition: 0.2s;
    padding-right: 15px;
    padding-left: 15px;
  }
  .publishPage{
    width: 100%;
    height: 200px;
    line-height: 200px;
    text-align: center;
    /*color: #565656;*/
    color: #f1f1f1;
    /*background-color: #ffffff;*/
    background-color: #5f5f5f;
  }
</style>
